<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热映大片_阿里迪里影院</title>
    <link href="images/favicon.ico" rel="shortcut icon" />

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/filmType.css">
    <style>
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 导航栏部分 -->
    <div class="head">
        <div class="head-inner">
            <div class="logo"><img src="images/logo.jpg">阿里迪里影院</div>

            <div class="nav">
                <ul class="navbar">
                    <li><a class="shouye" href="home_index.html">首页</a></li>
                    <li><a href="home_filmType.html">电影</a></li>
                    <li><a href="https://maoyan.com/cinemas">影院</a></li>
                    <li><a href="http://www.gewara.com/">演出</a></li>
                    <li><a href="https://maoyan.com/board">榜单</a></li>
                    <li><a href="https://maoyan.com/news">热点</a></li>
                    <li><a href="https://maoyan.com/edimall">商城</a></li>
                </ul>
            </div>

            <form>
                <input type="text" id="cond" required placeholder="找影片、 影剧" class="search">
                <input class="sub" type="button" title="点击可搜索你喜爱的电影哦。" id="commit">
            </form>

            <div class="user-info">
                <ul class="layui-nav layui-layout-right" style="background-color:#fff;">
                    <li class="layui-nav-item"><a href="javascript:;">
                            <img id="pic" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd id="h1" class="subMenu">
                                <a href="home_myOrder.html">我的订单</a>
                            </dd>
                            <dd id="h2" class="subMenu">
                                <a href="home_information.html">个人中心</a>
                            </dd>
                            <dd id="h3" class="subMenu">
                                <a id="logout">退出登录</a>
                            </dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>


    <!-- 影片中心板块部分 -->
    <div class="layui-tab" style="margin-top:80px">
        <ul class="layui-tab-title subnavs">
            <li class="layui-this sb" style="font-size:18px">正在热映</li>
            <li class="sb" style="font-size:18px">即将上映</li>
        </ul>



        <div class="layui-tab-content" id="filmType" v-cloak>
            <div class="layui-tab-item layui-show">

                <div class="container">
                    <div class="movies-channel">
                        <div class="movies-panel">
                            <dl class="movie-list">

                                <!-- 类型搜索版块 -->
                                <div class="tags-panel">
                                    <ul class="tags-lines">
                                        <li class="tags-line tags-line-border">
                                            <div class="tags-title">类型 :</div>
                                            <ul class="tags" id="one1">

                                                <li class="active">
                                                    <a style="cursor: default" value="" @click="typeOne($event)">全部</a>
                                                </li>

                                                <li v-for="(t,i) in types" :key="i">
                                                    <a style="cursor: pointer;" v-bind:value="t"
                                                        @click="typeOne($event)">{{t}}</a>
                                                </li>

                                            </ul>
                                        </li>
                                        <hr>
                                        <li class="tags-line tags-line-border">
                                            <div class="tags-title">区域 :</div>
                                            <ul class="tags" id="one2">
                                                <li class="active">
                                                    <a style="cursor: default" value="" @click="typeOne($event)">全部</a>
                                                </li>

                                                <li v-for="(a,i) in adress">
                                                    <a style="cursor: pointer" v-bind:value="a"
                                                        @click="typeOne($event)">{{a}}</a>
                                                </li>

                                            </ul>
                                        </li>

                                    </ul>
                                </div>

                                <dd v-for="(f,i) in hotShows" :key="i" @click="buy(f.filmId)">
                                    <div class="movie-item film-channel">
                                        <a>
                                            <div class="movie-poster">
                                                <img v-bind:src="'../images/'+f.filmPicture">
                                            </div>
                                        </a>
                                        <div class="channel-action channel-action-sale">
                                            <a>购票</a>
                                        </div>

                                        <div class="movie-ver"></div>
                                        <div class="movie-item-hover">
                                            <a>
                                                <img class="movie-hover-img" v-bind:src="'../images/'+f.filmPicture">
                                                <div class="movie-hover-info">
                                                    <div class="movie-hover-title" v-bind:title="f.filmName">
                                                        <span class="name ">{{f.filmName}}</span>
                                                        <span class="score channel-detail-orange">
                                                            <i class="integer">8.</i><i class="fraction">0</i></span>
                                                    </div>
                                                    <div class="movie-hover-title" v-bind:title="f.filmName">
                                                        <span class="hover-tag">类型:</span>
                                                        {{f.filmType}}
                                                    </div>
                                                    <div class="movie-hover-title" v-bind:title="f.filmName">
                                                        <span class="hover-tag">导演:</span>
                                                        {{f.filmDirector}}
                                                    </div>
                                                    <div class="movie-hover-title movie-hover-brief"
                                                        v-bind:title="f.filmName">
                                                        <span class="hover-tag">上映时间:</span>
                                                        {{f.filmYear}}
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="channel-detail movie-item-title" v-bind:title="f.filmName">
                                        <a>{{f.filmName}}</a>
                                    </div>
                                    <!-- <div class="channel-detail channel-detail-orange">
                                        <i class="integer">7.</i><i class="fraction">9</i>
                                    </div> -->
                                    <div class="channel-detail channel-detail-orange">暂无评分</div>
                                </dd>

                            </dl>

                            <div v-if="hotShows==null || hotShows.length==0" style="margin:30px auto;text-align: center;">
                                <span class="not-img"></span>
                                <span class="not-title">没有您想要查找的影片呢</span>
                            </div>
                        </div>
                        <!-- <div class="movies-pager">
                            <ul class="list-pager">
                                <li class="active">
                                    <a class="page_1" href="" style="cursor:default">1</a>
                                </li>
                                <li>
                                    <a href="" class="page_2">2</a>
                                </li>
                                <li>
                                    <a href="" class="page_2">下一页</a>
                                </li>
                            </ul>
                        </div> -->
                    </div>
                </div>
            </div>




            <div class="layui-tab-item">
                <div class="container">
                    <div class="movies-channel">
                        <div class="movies-panel">
                            <dl class="movie-list">

                                <!-- 类型搜索版块 -->
                                <div class="tags-panel" id="two">
                                    <ul class="tags-lines">
                                        <li class="tags-line tags-line-border">
                                            <div class="tags-title">类型 :</div>
                                            <ul class="tags" id="two1">

                                                <li class="active">
                                                    <a style="cursor: default" value="" @click="typeTwo($event)">全部</a>
                                                </li>

                                                <li v-for="(t,i) in types" :key="i">
                                                    <a style="cursor: pointer;" v-bind:value="t"
                                                        @click="typeTwo($event)">{{t}}</a>
                                                </li>

                                            </ul>
                                        </li>
                                        <hr>
                                        <li class="tags-line tags-line-border">
                                            <div class="tags-title">区域 :</div>
                                            <ul class="tags" id="two2">
                                                <li class="active">
                                                    <a style="cursor: default" value="" @click="typeTwo($event)">全部</a>
                                                </li>

                                                <li v-for="(a,i) in adress">
                                                    <a style="cursor: pointer" v-bind:value="a"
                                                        @click="typeTwo($event)">{{a}}</a>
                                                </li>

                                            </ul>
                                        </li>

                                    </ul>
                                </div>

                                <dd v-for="(f,i) in willShows" :key="i" @click="tishi(f.filmId)">
                                    <div class="movie-item film-channel">
                                        <a>
                                            <div class="movie-poster">
                                                <img v-bind:src="'../images/'+f.filmPicture">
                                            </div>
                                        </a>
                                        <div class="channel-action channel-action-sales">
                                            <a>预购</a>
                                        </div>

                                        <div class="movie-ver"></div>
                                        <div class="movie-item-hover">
                                            <a>
                                                <img class="movie-hover-img" v-bind:src="'../images/'+f.filmPicture">
                                                <div class="movie-hover-info">
                                                    <div class="movie-hover-title" v-bind:title="f.filmName">
                                                        <span class="name ">{{f.filmName}}</span>

                                                    </div>
                                                    <div class="movie-hover-title" v-bind:title="f.filmName">
                                                        <span class="hover-tag">类型:</span>
                                                        {{f.filmType}}
                                                    </div>
                                                    <div class="movie-hover-title" v-bind:title="f.filmName">
                                                        <span class="hover-tag">导演:</span>
                                                        {{f.filmDirector}}
                                                    </div>
                                                    <div class="movie-hover-title movie-hover-brief"
                                                        v-bind:title="f.filmName">
                                                        <span class="hover-tag">上映时间:</span>
                                                        {{f.filmYear}}
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="channel-detail movie-item-title" v-bind:title="f.filmName">
                                        <a>{{f.filmName}}</a>
                                    </div>
                                    <div class="channel-detail channel-detail-orange">暂无评分</div>
                                </dd>

                            </dl>

                            <div v-if="willShows==null || willShows.length==0" style="margin:30px auto;text-align: center;">
                                <span class="not-img"></span>
                                <span class="not-title">没有您想要查找的影片呢</span>
                            </div>

                        </div>
                        <!-- <div class="movies-pager">
                            <ul class="list-pager">
                                <li class="active">
                                    <a class="page_1" href="" style="cursor:default">1</a>
                                </li>
                                <li>
                                    <a href="" class="page_2">2</a>
                                </li>
                                <li>
                                    <a href="" class="page_2">下一页</a>
                                </li>
                            </ul>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>





        <!--底部版块部分-->
        <div class="footer">
            <p class="footer-font">
                关于阿里迪里：
                <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                    href="#">投资者关系</a>&nbsp;&nbsp;&nbsp;&nbsp;
                友情链接：
                <a href="https://maoyan.com/films">猫眼电影</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                    href="https://maoyan.com/cinemas">猫眼影院</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                    href="https://maoyan.com/edimall">猫眼商城</a>
            </p>

            <p>
                商务合作邮箱：alidli@qq.com &nbsp;&nbsp;|&nbsp;&nbsp;客服电话：10104422
            </p>

            <p class="footer-font">
                Copyright &copy; 2020 - {{nowYear}} 版权所有| by<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
            </p>

            <p>
                &copy;2020 阿里迪里影视 alidli.com
            </p>

            <div class="footer-end">
                <img src="images/bankuai1.png"><img src="images/bankuai2.png"><img src="images/bankuai3.png">
            </div>
        </div>


        <script src="../js/jquery-1.12.4.min.js"></script>
        <script src="../js/jquery.cookie.js"></script>
        <script src="../js/Vue.js"></script>
        <script src="../layer/layer.js"></script>
        <script src="../layui/layui.js"></script>
        <script src="js/home-filmType.js"></script>
        <script src="js/home-same.js"></script>
        <script>

            // 鼠标经过li节点时 字体变色
            // $(".tags li[class!=active] a").hover(function(){
            //     console.log("ok");
            //     if($(this).parent().hasClass("active")){
            //         return;
            //     }
            //     $(this).addClass("over");
            // },function(){
            //     console.log("ha");
            //     $(this).removeClass("over");
            // });

            // $(".tags").on("mouseover","li[class!=active] a",function(){
            //     $(this).addClass("over");
            // });

            // $(".tags").on("mouseout","li[class!=active] a",function(){
            //     $(this).removeClass("over");
            // });
        </script>
</body>
</html>